<template>
  <view class="package-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <CustomNavbar title="套餐余量" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 用户信息区域 -->
      <view class="user-info-section">
        <view class="user-phone">
          <text class="phone-number">{{ phoneNumber }}</text>
          <view class="date-picker" @click="showDatePicker">
            <image class="calendar-icon" src="/static/icons/icon-data.png" mode="aspectFit" />
            <text class="date-text">{{ currentDate }}</text>
          </view>
        </view>
        
        <!-- 月份标签 -->
        <view class="month-tabs">
          <view 
            class="tab-item" 
            v-for="(month, index) in monthTabs" 
            :key="index"
            :class="{ active: currentMonth === index }"
            @click="switchMonth(month, index)"
          >
            {{ month }}
          </view>
        </view>
      </view>
      
      <!-- 内容区域 -->
      <view class="content-wrapper">
        <!-- 流量部分 -->
        <view class="section-title">
          <view style=" width: 8rpx; height: 40rpx; background-color: #1890ff; border-radius: 20rpx; margin-right: 16rpx;"></view>
          流量</view>
        
        <!-- 国内流量 -->
        <view class="data-item">
          <view class="data-header" @click="toggleExpand('domestic')">
            <view class="data-header-left">
              <image class="data-icon" src="/static/icons/icon-traffic1.png" mode="aspectFit" />
              <view class="data-info">
                <text class="data-title">国内流量</text>
                <view class="progress-container">
                  <view class="progress-bar blue">
                    <view 
                      class="progress-fill" 
                      :style="{ width: (domesticData.used / domesticData.total * 100) + '%' }"
                    ></view>
                  </view>
                </view>
                <view class="data-stats">
                  <text class="data-remaining">剩余 {{ domesticData.remaining }}GB</text>
                  <text class="data-used">已使用 {{ domesticData.used }}GB</text>
                </view>
              </view>
            </view>
            <view class="expand-icon" :class="{ expanded: expandedSections.domestic }">
              <image class="arrow-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
            </view>
          </view>
          
          <!-- 展开的详细内容 -->
          <view class="data-details" v-if="expandedSections.domestic">
            <view 
              class="detail-item" 
              v-for="(item, index) in domesticData.items" 
              :key="index"
            >
              <view class="detail-name"><view style="display: inline-block; width: 12rpx; height: 12rpx; background-color: #1890ff; border-radius: 50%; margin-right: 8px;"></view>{{ item.name }}</view>
              <view class="detail-usage">
                <text style="color: rgba(78, 138, 254, 1);">总量 {{ item.total }}</text>
                <text>已用 {{ item.used }}</text>
                <text>剩余 {{ item.remaining }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 定向流量 -->
        <view class="data-item">
          <view class="data-header" @click="toggleExpand('directed')">
            <view class="data-header-left">
              <image class="data-icon" src="/static/icons/icon-traffic2.png" mode="aspectFit" />
              <view class="data-info">
                <text class="data-title">定向流量</text>
                <view class="progress-container">
                  <view class="progress-bar orange">
                    <view 
                      class="progress-fill" 
                      :style="{ width: (directedData.used / directedData.total * 100) + '%' }"
                    ></view>
                  </view>
                </view>
                <view class="data-stats">
                  <text class="data-remaining">剩余 {{ directedData.remaining }}GB</text>
                  <text class="data-used">已使用 {{ directedData.used }}GB</text>
                </view>
              </view>
            </view>
            <view class="expand-icon" :class="{ expanded: expandedSections.directed }">
              <image class="arrow-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
            </view>
          </view>

          <!-- 展开的详细内容 -->
          <view class="data-details" v-if="expandedSections.directed">
            <view 
              class="detail-item" 
              v-for="(item, index) in directedData.items" 
              :key="index"
            >
              <view class="detail-name"><view style="display: inline-block; width: 12rpx; height: 12rpx; background-color: #1890ff; border-radius: 50%; margin-right: 8px;"></view>{{ item.name }}</view>
              <view class="detail-usage">
                <text style="color: rgba(78, 138, 254, 1);">总量 {{ item.total }}</text>
                <text>已用 {{ item.used }}</text>
                <text>剩余 {{ item.remaining }}</text>
              </view>
            </view>
          </view>
          
          
        </view>
        
        <!-- 语音部分 -->
        <view class="section-title">
          <view style=" width: 8rpx; height: 40rpx; background-color: #1890ff; border-radius: 20rpx; margin-right: 16rpx;"></view>
          语音</view>
        
        <!-- 国内通话时长 -->
        <view class="data-item">
          <view class="data-header" @click="toggleExpand('voice')">
            <view class="data-header-left">
              <image class="data-icon" src="/static/icons/icon-traffic3.png" mode="aspectFit" />
              <view class="data-info">
                <text class="data-title">国内通话时长</text>
                <view class="progress-container">
                  <view class="progress-bar green">
                    <view 
                      class="progress-fill" 
                      :style="{ width: (voiceData.used / voiceData.total * 100) + '%' }"
                    ></view>
                  </view>
                </view>
                <view class="data-stats">
                  <text class="data-remaining">剩余 {{ voiceData.remaining }}分钟</text>
                  <text class="data-used">总量 {{ voiceData.total }}分钟</text>
                </view>
              </view>
            </view>
            <view class="expand-icon" :class="{ expanded: expandedSections.voice }">
              <image class="arrow-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
            </view>
          </view>

          <!-- 展开的详细内容 -->
          <view class="data-details" v-if="expandedSections.voice">
            <view 
              class="detail-item" 
              v-for="(item, index) in voiceData.items" 
              :key="index"
            >
              <view class="detail-name"><view style="display: inline-block; width: 12rpx; height: 12rpx; background-color: #1890ff; border-radius: 50%; margin-right: 8px;"></view>{{ item.name }}</view>
              <view class="detail-usage">
                <text style="color: rgba(78, 138, 254, 1);">总量 {{ item.total }}</text>
                <text>已用 {{ item.used }}</text>
                <text>剩余 {{ item.remaining }}</text>
              </view>
            </view>
          </view>
          
          
        </view>
        
        <!-- 猜你喜欢 -->
        <view class="section-title">
          <view style=" width: 8rpx; height: 40rpx; background-color: #1890ff; border-radius: 20rpx; margin-right: 16rpx;"></view>
          猜你喜欢</view>
        <view class="recommend-section">
          <!-- 这里可以添加推荐内容 -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api'



const navBarHeight = ref(88)
const phoneNumber = ref('189*****0691')
const currentDate = ref((new Date().getMonth() + 1) + '月'+(new Date().getDate())+'日')
const currentMonth = ref(0)
const monthTabs = ref(['9月', '8月', '7月', '6月', '5月', '4月', '3月'])

const expandedSections = ref({
  domestic: false,
  directed: false,
  voice: false
})

const domesticData = ref({
  total: 0,
  used: 0,
  remaining: 0,
  items: [
    // {
    //   name: '畅享套餐99元-手机上网流量(国内)',
    //   original: 99,
    //   discount: 0,
    //   actual: 99,
    //   total: 20.0,
    //   used: 0.0,
    //   remaining: 20.0
    // },
    // {
    //   name: '套餐升级专属权益30GB流量月包(10元/月)-手机上网流量(国内)',
    //   original: 10,
    //   discount: 0,
    //   actual: 10,
    //   total: 30.0,
    //   used: 0.0,
    //   remaining: 30.0
    // },
    // {
    //   name: '0元39G专用定向流量-手机上网流量(国内)',
    //   original: 0,
    //   discount: 0,
    //   actual: 0,
    //   total: 39.0,
    //   used: 31.96,
    //   remaining: 7.04
    // }
  ]
})

const directedData = ref({
  total: 0,
  used: 0,
  remaining: 0,
  items:[],
})

const voiceData = ref({
  total: 0,
  used: 0,
  remaining: 0,
  items:[],
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44

  monthTabs.value = []
  for(let i=1; i<=(new Date().getMonth() + 1); i++){
    monthTabs.value.push(i + '月')
  }
  monthTabs.value.reverse()
  

  queryAllowance(monthTabs.value[currentMonth.value].replace('月', ''))
})

const queryAllowance = (month) => {
  
  api.queryAllowance({
    month: month
  }).then(res => {
    console.log('查询套餐余量响应:', JSON.stringify(res))
    if (res.code === 200) {
      // 处理查询成功逻辑
    //  let res = {"msg":"套餐余量查询成功","code":200,"data":{"ll_sy":"103.34","ll_use":"136.66","code":"0","yy_sy":"3063","ll_total":"240.00","yy_total":"3230","LL_3":[["3","包月流量包0元100GB-手机上网流量（国内）","100.0","100.0","0.0","ty","331100","999964407","2025-09-01 00:00:00","2025-09-30 00:00:00","22","910758316515"],["3","量子密话0元体验包-量子密话国内定向流量","731.15","731.15","0","dx","331201","999951483","2025-09-08 00:00:00","2025-09-30 00:00:00","22","910897654918"],["3","包月流量包0元20GB-手机上网流量（国内）","20.0","20.0","0.0","ty","331100","999962412","2025-09-01 00:00:00","2025-09-30 00:00:00","22","910758316513"],["3","5G畅享199元套餐201910-手机上网流量（国内）","60.0","16.66","43.34","ty","332100","999918265","2025-09-01 00:00:00","2025-09-30 00:00:00","21","910758316510"],["3","5G畅享199元套餐201910-手机上网流量（国内）","60.0","0.0","60.0","ty","331100","999918265","2025-09-01 00:00:00","2025-09-30 00:00:00","21","910758316510"]],"yy_use":"167","YY_1":[["1","0元语音包2000分钟-国内通话时长","2000.0","167.0","1833.0","yy","131100","995071125","2025-09-01 00:00:00","2025-09-30 00:00:00","22","910384358475"],["1","量子密话0元体验包-量子密话通话时长","230.0","0.0","230.0","yy","131100","999951483","2025-09-01 00:00:00","2025-09-30 00:00:00","22","910897654918"],["1","5G畅享199元套餐201910-国内通话时长","1000.0","0.0","1000.0","yy","131100","999918265","2025-09-01 00:00:00","2025-09-30 00:00:00","21","910758316510"]],"desc":"成功"}}
      res.data.LL_3.forEach(item => {
        //获取国内流量总量
        if(item[5] == 'ty'){
    
          domesticData.value.used += item[3] * 1.00
          domesticData.value.remaining += item[4] * 1.00

          let params = {}
          params.name = item[1]
          // params.original = item[2] 
          // params.discount = item[3] 
          // params.actual = item[4]
          // params.total = item[5] * 1.00
          params.used = item[3] + "GB" 
          // params.remaining = item[4] 
          params.total = (parseInt(item[2]) >= 800) ? "畅享(达量限速)" : (item[2] + "GB");
          params.remaining = (parseInt(item[4]) >= 800) ? "--" : (item[4] + "GB");  
          domesticData.value.items.push(params)

        //   items: [
        // {
        //   name: '畅享套餐99元-手机上网流量(国内)',
        //   original: 99,
        //   discount: 0,
        //   actual: 99,
        //   total: 20.0,
        //   used: 0.0,
        //   remaining: 20.0
        // }
        }
        //获取定向流量总量
        if(item[5] == 'dx'){
    
          directedData.value.used += item[3] * 1.00
          directedData.value.remaining += item[4] * 1.00

          let params = {}
          params.name = item[1]
          // params.original = item[2] 
          // params.discount = item[3] 
          // params.actual = item[4]
          // params.total = item[5] * 1.00
          params.used = item[3] + "GB" 
          // params.remaining = item[4] 
          params.total = (parseInt(item[2]) >= 800) ? "畅享(达量限速)" : (item[2]+ "GB");
          params.remaining = (parseInt(item[4]) >= 800) ? "--" : (item[4] + "GB");  
          directedData.value.items.push(params)
        }

      })

      res.data.YY_1.forEach(item => {
      
        //获取通话时长总量
        if(item[5] == 'yy'){

          voiceData.value.used += item[3] * 1.00
          voiceData.value.remaining += item[4] * 1.00


          let params = {}
          params.name = item[1]
          // params.original = item[2] 
          // params.discount = item[3] 
          // params.actual = item[4]
          // params.total = item[5] * 1.00
          params.used = item[3] + "分钟"
          // params.remaining = item[4] 
          params.total = item[2] >= 100000000 ? "本地不限量" : (item[2] + "分钟");
          params.remaining = item[4] >= 100000000 ? "本地不限量" : (item[4] + "分钟");
          voiceData.value.items.push(params)
        }
      })

      domesticData.value.total = domesticData.value.used+domesticData.value.remaining
      directedData.value.total = directedData.value.used+directedData.value.remaining
      voiceData.value.total = voiceData.value.used+voiceData.value.remaining

      console.log('通话时长 共 --- = ',voiceData.value.total)
      console.log('国内流量 共 --- = ',domesticData.value.total)
      console.log('定向流量 共 --- = ',directedData.value.total)
    } else {
      // 处理查询失败逻辑
      uni.showToast({
        title: '查询失败: ' + res.msg,
        icon: 'none',
        duration: 2000
      })
    }
  }).catch(err => {
    console.error('查询套餐余量错误:', err)
    // uni.showToast({
    //   title: '查询失败: ' + err.message,
    //   icon: 'none',
    //   duration: 2000
    // })
  })
}



const switchMonth = (month, index) => {
  currentMonth.value = index
  console.log('切换月份:', month)
  // 这里可以添加获取对应月份数据的逻辑

  queryAllowance(month.replace('月', ''))
}

const toggleExpand = (section) => {
  expandedSections.value[section] = !expandedSections.value[section]

  
}

const showDatePicker = () => {
  // 显示日期选择器
  // console.log('显示日期选择器')
}
</script>

<style scoped>
.package-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.page-content {
  position: relative;
  z-index: 2;
  padding-bottom: 40rpx;
}

/* 用户信息区域 */
.user-info-section {
  padding: 40rpx 32rpx 0 32rpx;
}

.user-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.phone-number {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.date-picker {
  display: flex;
  align-items: center;
  border-radius: 40px;
backdrop-filter: blur(8px);
background: linear-gradient(180.00deg, rgba(255, 255, 255, 0.9),rgba(222.26136779785156, 233.55055236816406, 255, 0.9) 20%,rgba(197, 217, 255, 0.9) 53%,rgba(227.102294921875, 236.72218322753906, 255, 0.9) 90%,rgba(255, 255, 255, 0.9) 100%);
  gap: 8rpx;
  padding: 8rpx 16rpx;
}

.calendar-icon {
  width: 32rpx;
  height: 32rpx;
}

.date-text {
  color: rgba(78, 138, 254, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
font-weight: 500;
line-height: 32rpx;
}

/* 月份标签 */
.month-tabs {
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  padding-left: 240rpx;
  margin-bottom: 30rpx;
  overflow-x: auto;
}

.tab-item {
  padding: 8rpx 16rpx;
  color: rgba(255, 255, 255, 0.8);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 38rpx;
  border-radius: 8rpx;
  white-space: nowrap;
}

.tab-item.active {
  border-radius: 20px;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
}

/* 内容区域 */
.content-wrapper {
  border-radius: 16rpx;
  z-index: 10;
  padding: 0 32rpx 40rpx 32rpx;
  overflow: visible;
  clip-path: polygon(
    0% 0%,
    calc(50% - 30rpx) 0%,
    50% 30rpx,
    calc(50% + 30rpx) 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

.section-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
  margin-bottom: 24rpx;
  display: flex;
}

/* 数据项 */
.data-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0px 8rpx 8rpx 0px rgba(125, 182, 251, 0.1);
}

.data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.data-header-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
}

.data-icon {
  width: 64rpx;
  height: 64rpx;
  flex-shrink: 0;
}

.data-info {
  flex: 1;
}

.data-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.data-stats {
  display: flex;
  gap: 24rpx;
}

.data-remaining,
.data-used {
  color: rgba(102, 102, 102, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}

.expand-icon {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
}

/* 进度条 */
.progress-container {
  margin: 16rpx 0;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background: #F0F0F0;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-bar.blue .progress-fill {
  background: #4A90E2;
}

.progress-bar.orange .progress-fill {
  background: #FF9800;
}

.progress-bar.green .progress-fill {
  background: #07C160;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s;
}

/* 详细内容 */
.data-details {
  margin-top: 24rpx;
  padding-top: 24rpx;
  border-top: 1rpx solid #F0F0F0;
}

.details-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 32rpx;
  margin-bottom: 16rpx;
}

.details-header {
  display: flex;
  justify-content: space-between;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
  margin-bottom: 16rpx;
}

.header-col {
  flex: 1;
  text-align: center;
  color: rgba(102, 102, 102, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}

.detail-item {
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-name {
  color: rgba(153, 153, 153, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
line-height: 32rpx;
  margin-bottom: 12rpx;
  display: block;
}
/* .detail-name ::after{
  width: 12rpx;
height: 12rpx;
border-radius: 50%;
  background: rgba(78, 138, 254, 1);
} */

.detail-values {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.detail-value {
  flex: 1;
  text-align: center;
  color: rgba(102, 102, 102, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}

.detail-value.has-discount {
  color: #FF5722;
}

.detail-usage {
  display: flex;
  justify-content: space-between;
  margin-top: 24rpx;
}

.detail-usage text {
  color: rgba(102, 102, 102, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
line-height: 32rpx;
}

/* 猜你喜欢 */
.recommend-section {
  min-height: 200rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}
</style>
